﻿@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<script>
    var keyValue = request('keyValue');
    var postData = {};   
    $(function () {
        initialStep();
        initialPage(); 
    })
  
    function initialStep() {
        //计费方式      
        $("#CalType").ComboBox({
            data: [{ "key": 1, "value": "周期性" }, { "key": 2, "value": "临时性" }, { "key": 3, "value": "滞纳金" }],
            id: "key",
            text: "value",
            description: "==请选择=="
        });
        $("#CalType").ComboBoxSetValue(1);

        //统计类别
        $("#StatiscalCategoryId").ComboBoxTree({
            url: "../../SystemManage/DataItemDetail/GetDataItemTreeJson",
            param: { EnCode: "StatiscalCategory" },
            description: "==无==",
            height: "250px",
            click: function (data) {
                StatiscalCategoryId = data.id;
            }
        });

        //费项性质
        $("#PropertyTypeId").ComboBoxTree({
            url: "../../SystemManage/DataItemDetail/GetDataItemTreeJson",
            param: { EnCode: "FeeType" },
            description: "==无==",
            height: "250px",
            click: function (data) {
                PropertyTypeId = data.id;
            }
        });
        //用量阶梯单价
        $("#LadderUnitPriceId").ComboBoxTree({
            // url: "../../BaseManage/Organize/GetTreeJson",          
            description: "==无==",
            height: "250px",
            click: function (data) {
                SysType = data.id;
            }
        });
        //系统类别
        $("#SysType").ComboBox({
            data: [{ "key": 1, "value": "管理费" }, { "key": 2, "value": "车位管理费" }, { "key": 3, "value": "租金" }],
            id: "key",
            text: "value",
            description: "==请选择=="
        });

        //计算方法
        $("#CalculateType").ComboBox({
            data: [{ "key": 1, "value": "用量*系数*单价" }, { "key": 2, "value": "用量*单价+系数" }],
            id: "key",
            text: "value",
            description: "==请选择=="
        });
        $("#CalculateType").ComboBoxSetValue(1);

        //期间核算方法
        $("#PeriodCalculateType").ComboBoxTree({
            // url: "../../BaseManage/Organize/GetTreeJson",
            description: "==无==",
            height: "250px",
            click: function (data) {
                SysType = data.id;
            }
        });

        //应付费项
        $("#PayFeeItemId").ComboBoxTree({
            // url: "../../BaseManage/Organize/GetTreeJson",
            description: "==无==",
            height: "250px",
            click: function (data) {
                SysType = data.id;
            }
        });

        //滞纳金计算方式
        $("#DelayFeeCalculateWay").ComboBox({
            data: [{ "key": 1, "value": "欠费金额*滞纳金比例*滞纳天数" }, { "key": 2, "value": "欠费金额*(1+滞纳金比例)^(滞纳天数-1)" }, { "key": 3, "value": "欠费金额*分段滞纳金比例*滞纳天数" }, { "key": 4, "value": "欠费金额*滞纳金比例*滞纳月数" }, { "key": 5, "value": "滞纳金比例*滞纳天数" }],
            id: "key",
            text: "value",
            description: "==请选择=="
        });
        $("#DelayFeeCalculateWay").ComboBoxSetValue(1);

        //税务项目
        $("#TaxItemId").ComboBoxTree({
            // url: "../../BaseManage/Organize/GetTreeJson",
            description: "==无==",
            height: "250px",
            click: function (data) {
                SysType = data.id;
            }
        });
        //价格类型
        $("#TaxPriceType").ComboBox({
            data: [{ "key": 1, "value": "含税" }, { "key": 2, "value": "不含税" }],
            id: "key",
            text: "value",
            description: "==请选择=="
        });
        $("#TaxPriceType").ComboBoxSetValue(1);

        //计算基础
        $("#ReceivePeriodBase").ComboBox({
            data: [{ "key": 1, "value": "计费起始日期" }, { "key": 2, "value": "计费终止日期" }, { "key": 3, "value": "创建日期" }],
            id: "key",
            text: "value",
            description: "==请选择=="
        });
        $("#ReceivePeriodBase").ComboBoxSetValue(1);
        
        $("#AccPeriodBase").ComboBox({
            data: [{ "key": 1, "value": "计费起始日期" }, { "key": 2, "value": "计费终止日期" }, { "key": 3, "value": "创建日期" }],
            id: "key",
            text: "value",
            description: "==请选择=="
        });
        $("#AccPeriodBase").ComboBoxSetValue(1);
        
        $("#BillDateBase").ComboBox({
            data: [{ "key": 1, "value": "计费起始日期" }, { "key": 2, "value": "计费终止日期" }, { "key": 3, "value": "创建日期" }],
            id: "key",
            text: "value",
            description: "==请选择=="
        });
        $("#BillDateBase").ComboBoxSetValue(1);        

        $("#PayDateBase").ComboBox({
            data: [{ "key": 1, "value": "计费起始日期" }, { "key": 2, "value": "计费终止日期" }, { "key": 3, "value": "创建日期" }],
            id: "key",
            text: "value",
            description: "==请选择=="
        });
        $("#PayDateBase").ComboBoxSetValue(1);

        
        $("#DelayFeeBase").ComboBox({
            data: [{ "key": 1, "value": "计费起始日期" }, { "key": 2, "value": "计费终止日期" }, { "key": 3, "value": "创建日期" }],
            id: "key",
            text: "value",
            description: "==请选择=="
        });
        $("#DelayFeeBase").ComboBoxSetValue(1);
    }

    function initialPage() {   
        //加载导向
        $('#wizard').wizard().on('change', function (e, data) {
            var $finish = $("#btn_finish");
            var $next = $("#btn_next");
            if (data.direction == "next") {
                
                switch (data.step) {
                    case 1:
                        if (!bindingStep1()) {
                            return false;
                        }
                        $finish.removeAttr('disabled');
                        $next.attr('disabled', 'disabled');
                        break;                                
                    default:
                        break;
                }
            }
            else {
                $finish.attr('disabled', 'disabled');
                $next.removeAttr('disabled');
            }
        });

        //获取表单
        if (!!keyValue) {
            $.SetForm({
                url: "../../FinancialManage/FeeItems/GetFormJson",
                param: { keyValue: keyValue },
                success: function (data) {
                    $(".form").SetWebControls(data);                 
                    $("input[name='IsGeneratePay'][value=" + data.IsGeneratePay + "]").attr("checked", true);
                }
            });
        }
    }

    function bindingStep1() {
        if (!$('#step-1').Validform()) {
            return false;
        }
        var postData1 = $("#step-1").GetWebControls(keyValue);
        postData1["IsGeneratePay"] = $('#IsGeneratePay input[name="IsGeneratePay"]:checked ').val();
        postData = $.extend(postData, postData1);
        return true;
    }

    //完成
    function finishbtn() {

        var postData2 = $("#step-2").GetWebControls(keyValue);
        postData = $.extend(postData, postData2);
        $.SaveForm({
            url: "../../FinancialManage/FeeItems/SaveForm?keyValue=" + keyValue,
            param: postData,
            loading: "正在保存数据...",
            success: function () {
                $.currentIframe().$("#gridTable").trigger("reloadGrid");
            }
        })
    }

</script>
<div class="widget-body">
    <div id="wizard" class="wizard" data-target="#wizard-steps" style="border-left: none; border-top: none; border-right: none;">
        <ul class="steps">
            <li data-target="#step-1" class="active"><span class="step">1</span>基本信息<span class="chevron"></span></li>
            <li data-target="#step-2"><span class="step">2</span>期间及计算精度<span class="chevron"></span></li>
        </ul>
    </div>
    <div class="step-content" id="wizard-steps" style="border-left: none; border-bottom: none; border-right: none;">
        <div class="step-pane active" id="step-1">
            <table class="form">
                <tr>
                    <td class="formTitle">费项名称<font face="宋体">*</font></td>
                    <td class="formValue">
                        <input id="Name" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" onblur="$.ExistField(this.id,'../../FinancialManage/FeeItems/ExistName')" />
                    </td>
                    <td class="formTitle">费项编号<font face="宋体">*</font></td>
                    <td class="formValue">
                        <input id="Code" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" onblur="$.ExistField(this.id,'../../FinancialManage/FeeItems/ExistCode')" />
                    </td> 
                    <td class="formTitle">统计类别<font face="宋体">*</font></td>
                    <td class="formValue" >
                        <div id="StatiscalCategoryId" type="selectTree" class="ui-select" isvalid="yes" checkexpession="NotNull"></div>
                    </td>   
                               
                  
                </tr>   
                <tr>
                    <td class="formTitle">计费方式<font face="宋体">*</font></td>
                    <td class="formValue">
                        <div id="CalType" type="selectTree" class="ui-select" isvalid="yes" checkexpession="NotNull"></div>
                    </td>
                    <td class="formTitle">计费周期</td>
                    <td class="formValue" >
                        <div class="input-group" style="width:100%">
                            <input id="UnitNum" type="text" class="form-control" style="width:60%" />
                            <select id="Unit">
                                <option value="0">日</option>
                                <option value="1">周</option>
                                <option selected value="2">月</option>
                                <option value="3">季</option>
                                <option value="4">年</option>
                                <option value="5">工作日</option>
                            </select>
                        </div>
                    </td>    
                </tr>
                @*<tr>
                    <td class="formTitle">费项性质<font face="宋体">*</font></td>
                    <td class="formValue">
                        <div id="PropertyTypeId" type="selectTree" class="ui-select" isvalid="yes" checkexpession="NotNull"></div>
                    </td>
                    <td class="formTitle">系统类别</td>
                    <td class="formValue">
                        <div id="SysType" type="selectTree" class="ui-select"></div>
                    </td>                 
                    <td class="formTitle">税务项目</td>
                    <td class="formValue">
                        <div id="TaxItemId" type="selectTree" class="ui-select"></div>
                    </td>
                    <td class="formTitle">序号<font face="宋体">*</font></td>
                    <td class="formValue">
                        <input id="Sort" type="number" class="form-control" isvalid="yes" checkexpession="NotNull" />
                    </td>
                </tr>*@        
                <tr>
                    <td class="formTitle">计算方法<font face="宋体">*</font></td>
                    <td class="formValue" colspan="5">
                        <div id="CalculateType" type="selectTree" class="ui-select" isvalid="yes" checkexpession="NotNull"></div>
                    </td>                     
                </tr>
                <tr>
                    <td class="formTitle">用量公式</td>
                    <td class="formValue">
                        <div class="input-group" style="width:100%">
                            <input id="QuantityFormula" type="text" class="form-control" value="1" />
                            <span id="QuantityFormulaBtn" class="input-group-addon" style=" cursor: pointer;">...</span>
                        </div>
                    </td>                  
                    <td class="formTitle">单价公式</td>
                    <td class="formValue">
                        <div class="input-group" style="width:100%">
                            <input id="UnitPriceFormula" type="text" class="form-control" value="1" />
                            <span id="UnitPriceBtn" class="input-group-addon" style=" cursor: pointer;">...</span>
                        </div>
                    </td>  
                    <td class="formTitle">系数公式</td>
                    <td class="formValue">
                        <div class="input-group" style="width:100%">
                            <input id="CoefficientFormula" type="text" class="form-control" value="1" />
                            <span id="CoefficientFormulaBtn" class="input-group-addon" style=" cursor: pointer;">...</span>
                        </div>
                    </td>                
                </tr>
             
                @*<tr>
                    <td class="formTitle">用量阶梯单价</td>
                    <td class="formValue">
                        <div id="LadderUnitPriceId" type="selectTree" class="ui-select"></div>
                    </td>
                    <td class="formTitle">期间核算方式</td>
                    <td class="formValue">
                        <div id="PeriodCalculateType" type="selectTree" class="ui-select"></div>
                    </td>
                  
                </tr>*@
                <tr>
                    <td class="formTitle">是否生成应付</td>
                    <td class="formValue" >
                        <div id="IsGeneratePay" class="radio">
                            <label> <input name="IsGeneratePay" type="radio" checked value="0" />收款后不生成应付</label>
                            <label><input name="IsGeneratePay" type="radio" value="1" />收款后生成应付</label>
                        </div>
                    </td>
                    <td class="formTitle">应付费项</td>
                    <td class="formValue">
                        <div id="PayFeeItemId" type="selectTree" class="ui-select"></div>
                    </td>
                    <td class="formTitle">应付比例</td>
                    <td class="formValue" >
                        <input id="PayRate" type="text" class="form-control" />
                    </td>
                </tr>
                <tr>
                    <td class="formTitle">滞纳金比例</td>
                    <td class="formValue">
                        <input id="DelayFeeRate" type="text" class="form-control" />
                    </td>
                    <td class="formTitle">滞纳金计算方法</td>
                    <td class="formValue" colspan="3">
                        <div id="DelayFeeCalculateWay" type="selectTree" class="ui-select"></div>
                    </td>
                </tr>
                @*<tr>                  
                    <td class="formTitle">价格类型</td>
                    <td class="formValue">
                        <div id="TaxPriceType" type="selectTree" class="ui-select"></div>
                    </td>
                    <td class="formTitle">税率</td>
                    <td class="formValue">
                        <input id="TaxRate" type="text" class="form-control" />
                    </td>               
                    <td class="formTitle">单位</td>
                    <td class="formValue">
                        <input id="FeeUnit" type="text" class="form-control" />
                    </td>
                    <td class="formTitle">英文名称</td>
                    <td class="formValue" >
                        <input id="FeeUnitEn" type="text" class="form-control" />
                    </td>
                </tr>*@
                <tr>
                    <th class="formTitle" valign="top" style="padding-top: 4px;">
                        附加说明
                    </th>
                    <td class="formValue" colspan="5">
                        <textarea id="Description" class="form-control" style="height: 80px;"></textarea>
                    </td>
                </tr>
            </table>
        </div>
        <div class="step-pane" id="step-2">
            <table class="form">
                <tr>
                    <td class="formTitle">应收期间：距</td>
                    <td class="formValue">
                        <div class="input-group" style="width:100%">
                            <div id="ReceivePeriodBase" type="selectTree" class="ui-select CalBase" style="width: 20%; float: left;"></div>                           
                            <input id="ReceivePeriodNum" type="text" class="form-control" style="width:20%;" />
                            <select id="ReceivePeriodUnit">                             
                                    <option value="0">日</option>
                                    <option value="1">周</option>
                                    <option selected="selected" value="2">月</option>
                                    <option value="3">季</option>
                                    <option value="4">年</option>
                                    <option value="5">工作日</option>                              
                            </select>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="formTitle">权责期间：距</td>
                    <td class="formValue">
                        <div class="input-group" style="width:100%">  
                            <div id="AccPeriodBase" type="selectTree" class="ui-select CalBase" style="width: 20%; float: left;"></div> 
                            <input id="AccPeriodNum" type="text" class="form-control" style="width:20%;" />
                            <select id="AccPeriodUnit">
                                <option value="0">日</option>
                                <option value="1">周</option>
                                <option selected="selected" value="2">月</option>
                                <option value="3">季</option>
                                <option value="4">年</option>
                                <option value="5">工作日</option>     
                            </select>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="formTitle">账单日：距</td>
                    <td class="formValue">
                        <div class="input-group" style="width:100%">
                            <div id="BillDateBase" type="selectTree" class="ui-select CalBase" style="width: 20%; float: left;"></div>
                            <input id="BillDateNum" type="text" class="form-control" style="width:20%;" />
                            <select id="BillDateUnit">
                                <option value="0">日</option>
                                <option value="1">周</option>
                                <option selected="selected" value="2">月</option>
                                <option value="3">季</option>
                                <option value="4">年</option>
                                <option value="5">工作日</option>
                            </select>
                            <select id="BillDateDay">
                                <option value="0">0</option>
                                <option value="1">01日</option>
                                <option selected="selected" value="2">02日</option>
                                <option value="3">03日</option>
                                <option value="4">04日</option>
                                <option value="5">05日</option>
                            </select>
                            
                        </div>

                    </td>
                </tr>
                <tr>
                    <td class="formTitle">付款日：距</td>
                    <td class="formValue">
                        <div class="input-group" style="width:100%">
                            <div id="PayDateBase" type="selectTree" class="ui-select CalBase" style="width: 20%; float: left;"></div>                           
                            <input id="PayDateNum" type="text" class="form-control" style="width:20%;" />
                            <select id="PayDateUnit">
                                <option value="0">日</option>
                                <option value="1">周</option>
                                <option selected="selected" value="2">月</option>
                                <option value="3">季</option>
                                <option value="4">年</option>
                                <option value="5">工作日</option>         
                            </select>
                            <select id="PayDateDay">
                                <option value="0">0</option>
                                <option value="1">01日</option>
                                <option selected="selected" value="2">02日</option>
                                <option value="3">03日</option>
                                <option value="4">04日</option>
                                <option value="5">05日</option>
                            </select>
                           
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="formTitle">滞纳金起算日：距</td>
                    <td class="formValue">
                        <div class="input-group" style="width:100%">
                            <div id="DelayFeeBase" type="selectTree" class="ui-select CalBase" style="width: 20%; float: left;"></div>   
                            <input id="DelayFeeNum" type="text" class="form-control" style="width:20%;" />
                            <select id="DelayFeeUnit">
                                <option value="0">日</option>
                                <option value="1">周</option>
                                <option selected="selected" value="2">月</option>
                                <option value="3">季</option>
                                <option value="4">年</option>
                                <option value="5">工作日</option>         
                            </select>
                            <select id="DelayFeeDay">
                                <option value="0">0</option>
                                <option value="1">01日</option>
                                <option selected="selected" value="2">02日</option>
                                <option value="3">03日</option>
                                <option value="4">04日</option>
                                <option value="5">05日</option>
                            </select>                           
                        </div>
                    </td>
                </tr>
                <tr style=" height: 20px; border-bottom: 1px dashed #cecece;"><td colspan="2"></td> </tr>
                <tr>
                    <td class="formTitle">用量计算结果保留小数位数：</td>
                    <td class="formValue">
                        <div class="input-group" style="width:100%">                           
                            <input id="QuaDigit" type="number" class="form-control" style="width:20%;" min="0" max="8" value="4" />
                            <span style=" margin: 0 10px 0 10px;">对计算最后一位小数</span>
                            <select id="QuaMantWay">
                                <option value="1" selected="selected">四舍五入</option>
                                <option value="2">直接舍弃</option>
                                <option value="3">有数加1</option>
                            </select>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="formTitle">系数计算结果保留小数位数：</td>
                    <td class="formValue">
                        <div class="input-group" style="width:100%">
                            <input id="CoeDigit" type="number" class="form-control" style="width:20%;" min="0" max="8" value="4"/>
                            <span style=" margin: 0 10px 0 10px;">对计算最后一位小数</span>
                            <select id="CoeMantWay">
                                <option value="1" selected>四舍五入</option>
                                <option value="2">直接舍弃</option>
                                <option value="3">有数加1</option>
                            </select>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="formTitle">用量*系数 计算结果保留小数位数：</td>
                    <td class="formValue">
                        <div class="input-group" style="width:100%">
                            <input id="QuaCoeDigit" type="number" class="form-control" style="width:20%;" min="0"max="8" value="4" />
                            <span style=" margin: 0 10px 0 10px;">对计算最后一位小数</span>
                            <select id="QuaCoeMantWay">
                                <option value="1" selected>四舍五入</option>
                                <option value="2">直接舍弃</option>
                                <option value="3">有数加1</option>
                            </select>
                        </div>

                    </td>
                </tr>
                <tr>
                    <td class="formTitle">计算最终结果保留小数位数：</td>
                    <td class="formValue">
                        <div class="input-group" style="width:100%">
                            <input id="ResultDigit" type="number" class="form-control" style="width:20%;" min="0" max="2" value="2"  />
                            <span style=" margin: 0 10px 0 10px;">对计算最后一位小数</span>
                            <select id="ResultMantWay">
                                <option value="1" selected>四舍五入</option>
                                <option value="2">直接舍弃</option>
                                <option value="3">有数加1</option>
                            </select>
                        </div>
                    </td>
                </tr>
                <tr style=" height: 20px; border-bottom: 1px dashed #cecece;"><td colspan="2"></td> </tr>
                <tr>
                    <td class="formTitle">最终结果非整月计算方法：</td>
                    <td class="formValue">
                        <select id="HalfMonthCalWay">
                            <option value="1" selected>金额*实际天数/本月天数</option>
                            <option value="2">月金额*本月实际天数*12/365</option>
                            <option value="3">月金额*本月实际天数/30</option>
                            <option value="4">月金额*本月实际天数</option>
                            <option value="5">后半段=日金额*本月实际天数前半段  前半段=月金额-后半段</option>
                        </select>

                    </td>
                </tr>
            </table>
        </div>
    </div>   
</div>
<div class="form-button" id="wizard-actions">
    <a id="btn_last" disabled class="btn btn-default btn-prev">上一步</a>
    <a id="btn_next" class="btn btn-default btn-next">下一步</a>
    <a id="btn_finish" onclick="finishbtn()" class="btn btn-success">完成</a>
</div>

<style>
    #step-2 .formTitle{
        width:200px;
    }
    .form {
        margin-top: 30px;
    }
</style>

